<template>
  <div class="boxs" style="margin-left: 13px;width: 96%">
    <div class="table">
      <div class="ttit ttit0">部门名称</div>
      <div class="ttit ttit1">生产入库</div>
      <div class="ttit ttit2">采购入库</div>
    </div>
    <div class="tablebox" >
      <vue-seamless-scroll :data="reportDataList" class="seamless-warp" :class-option="defaultOption">
        <div class="table_cell" v-for="item in reportDataList">
          <div class="ttit ttit0 cpoint" style="color:#FFFFFF;">{{item.deptName}}</div>
          <div class="ttit ttit1 cpoint">{{item.reportCount}}</div>
          <div class="ttit ttit2 cpoint">{{item.peopleCount}}</div>
        </div>
      </vue-seamless-scroll>
    </div>
  </div>
</template>

<script>
import {getAction} from "@/api/manage";
import request from "@/utils/request";
import vueSeamlessScroll from 'vue-seamless-scroll'


export default {
  name: "EventDeptCountList",
  components: {
    vueSeamlessScroll,
  },
  data() {
    return {
      reportDataList:[],
      defaultOption:{
        step: 0.5, // 数值越大速度滚动越快
        limitMoveNum: 2, // 开始无缝滚动的数据量 this.dataList.length
        hoverStop: true, // 是否开启鼠标悬停stop
        direction: 1, // 0向下 1向上 2向左 3向右
        openWatch: true, // 开启数据实时监控刷新dom
        singleHeight: 0, // 单步运动停止的高度(默认值0是无缝不停止的滚动) direction => 0/1
        singleWidth: 0, // 单步运动停止的宽度(默认值0是无缝不停止的滚动) direction => 2/3
        waitTime: 1000 // 单步运动停止的时间(默认值1000ms)
      },

    }
  },
  mounted() {
    this.getReportDataCount();
  },
  created() {

  },
  methods: {
    getReportDataCount() {
      let that = this;
      let params = {};
      this.reportDataList = [ {
          reportCount: 10,
          peopleCount: "1",
          deptName: "微信"
        },
        {
          reportCount: 20,
          peopleCount: "2",
          deptName: "微博"
        },
        {
          reportCount: 30,
          peopleCount: "3",
          deptName: "百度"
        },
        {
          peopleCount: '4',
          reportCount: 40,
          deptName: "4",
        }];
    //   getAction('/statistic/event/deptReportCount', params).then(response => {
    //     that.reportDataList = response.rows;
    //   });
    },


  }
}
</script>
<style scoped lang="scss">

.tablebox{
  width: 100%;
  height: calc(100% - 0.40rem);
  // border: 1px solid red;
  //overflow-y: auto;
  position: relative;
}
.table{
  width: 100%;
  height: 0.25rem;
  font-size: 0.09rem;
  // border: 1px solid red
  display: flex;
  justify-content: space-around;
  /*background: rgba(115,191,233,0.2);*/
  font-size: 0.09rem;

  .ttit{
    /*width: 0.8rem;*/
    height: 0.25rem;
    line-height:  0.25rem;
    text-align: center;
    color: #2FFAFC;
    font-size: 0.08rem;
    width: 33.333333%;
    border: 0.1px solid #0d90ef;
    border-left: none;
  }
}

.table_cell{
  width: 100%;
  height: 0.25rem;
  font-size: 0.08rem;
  // border: 1px solid red
  display: flex;
  justify-content: space-around;
  font-size: 0.07rem;

  .ttit{
    /*width: 0.8rem;*/
    height: 0.25rem;
    line-height:  0.25rem;
    text-align: center;
    color: #ffff43;
    font-size: 0.09rem;
    width: 33.333333%;
    border: 0.1px solid #0d90ef;
    border-right: none;
    border-top: none;
  }
}
.boxs{
  width: 98%;
  text-align: center;
  height: calc(100% - 0.3rem);
  // border: 1px solid white;
}
.cpoint{
  cursor: pointer;
}
.seamless-warp{
  width: 100%;
  height: 100%;
  overflow: hidden;
}
</style>
